<template>
  <BasicDrawer v-bind="$attrs" @register="registerDrawer" title="支付通道" width="900px">
    <BasicTable @register="registerTable" :rowClassName="getRowClassName">
      <template #action="{ record }">
        <TableAction :actions="getTableAction(record)" />
      </template>
    </BasicTable>
  </BasicDrawer>
  <PayPassageDrawer @register="registerPayPassageDrawer" @success="reload" @go-relate-passage="handleEdit" />
</template>
<script lang="ts" setup>
  import { ref, unref } from "vue"
  import { BasicDrawer, useDrawerInner } from "/@/components/Drawer"
  import { BasicTable, useTable, TableAction } from "/@/components/Table"
  import { useModal } from "/@/components/Modal"
  import { useDrawer } from "/@/components/Drawer"
  import { useDesign } from "/@/hooks/web/useDesign"
  import PayPassageDrawer from "./PayPassageDrawer.vue"
  import { columns } from "./payPassage.data"
  import { listPayPassage, saveOrUpdatePayPassage } from "/@/api/pay"
  import { updatePassageStatus } from "/@/api/pay"
  const [registerPayPassageDrawer, { openDrawer: openPayPassageDrawer }] = useDrawer()

  const { prefixCls } = useDesign("row-invalid")
  const payConfigRecord = ref<any>({})
  const mchAppRecord = ref<any>({})

  const [registerModal, { openModal }] = useModal()
  const [registerDrawer] = useDrawerInner(async (data) => {
    payConfigRecord.value = data.record.payConfig
    mchAppRecord.value = data.record.mchApp
    setProps({ searchInfo: { appId: unref(mchAppRecord.value.id) } })
    reload()
  })

  const [registerTable, { reload, setProps }] = useTable({
    api: listPayPassage,
    beforeFetch: (params) => {
      params.appId = mchAppRecord.value.id
      params.ifCode = payConfigRecord.value.ifCode
    },
    columns: columns,
    rowKey: "id",
    striped: true,
    useSearchForm: false,
    bordered: false,
    showIndexColumn: false,
    canResize: false,
    immediate: false,
    actionColumn: {
      width: 100,
      title: "操作",
      dataIndex: "action",
      slots: { customRender: "action" },
      fixed: undefined,
    },
  })

  /**
   * 配置
   */
  function handleEdit(record) {
    openPayPassageDrawer(true, {
      record: {
        payPassage: record,
        payConfig: payConfigRecord.value,
        mchApp: mchAppRecord.value,
      },
      isUpdate: true,
    })
  }

  async function handleUpdateStatus(record) {
    await updatePassageStatus({
      id: record.id,
      status: record.status === "1" ? "0" : "1",
    })
    reload()
  }

  /**
   * 操作栏
   */
  function getTableAction(record) {
    return [
      {
        label: "配置",
        onClick: handleEdit.bind(null, record),
      },
      {
        label: "启用",
        color: "success",
        ifShow: record.status !== "1",
        onClick: handleUpdateStatus.bind(null, record),
      },
      {
        label: "禁用",
        color: "error",
        ifShow: record.status === "1",
        popConfirm: {
          title: "是否确认禁用",
          confirm: handleUpdateStatus.bind(null, record),
        },
      },
    ]
  }
  function getRowClassName(record) {
    return record.status > 1 ? prefixCls : ""
  }

  // 选择用户成功
  async function onSelectPayIfDefineOk(options, idList) {
    if (idList.length > 0) {
      try {
        console.log("idList: ", idList)
        await saveOrUpdatePayPassage({ ifDefineIds: idList, appId: appId.value })
        // setLoading(true)
        // await linkDepartUserBatch(departId.value, userIdList)
        reload()
      } finally {
        // setLoading(false)
      }
    }
  }
</script>
<style scoped lang="less">
  @prefix-cls: ~"@{namespace}-row-invalid";

  :deep(.@{prefix-cls}) {
    background: #f4f4f4;
    color: #bababa;
  }
</style>
